<template>
	<view class="index">
		<view class="index-top" :style="{backgroundImage: 'url('+imageURL+')'}">
			<view class="news" @click="open">{{news.title}}</view>
			<uni-popup class="newscont" ref="popup" type="center" :mask-click="false">
				<view class="newscont">
					<view class="title">{{news.contitle}}</view>
					<view class="text">
						长征精神的基本内涵是:<br />
						①把全国人民和中华民族的根本利益看得高于一切，坚定革命的理想和信念，坚信正义事业必然胜利的精神;<br />
						②为了救国救民，不怕任何艰难险阻，不惜付出一切牺牲的精神;<br />
						③坚持独立自主、实事求是，一切从实际出发的精神;<br />
						④顾全大局、严守纪律、紧密团结的精神;<br />
						⑤紧紧依靠人民群众，同人民群众生死相依、患难与共、艰苦奋斗的精神。
					</view>
					<view @click="close" class="close">确认</view>
				</view>
			</uni-popup>
			<view class="taday">
				<view class="red-circle">
					今日步数<span class="red-font">2500</span>
				</view>
				<view class="go" @click="go">立即参与</view>
			</view>
		</view>
		<!-- 下半部分 -->
		<!-- <image src="../../static/indexbg.jpg" mode="widthFix" style="width: 100%;"></image> -->
		<image src="../../static/indexbg2.png" mode="widthFix" style="width: 100%;display: block;position: absolute;bottom: 0;"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aa:false,
				imageURL:"../../static/indexbg.jpg",
				news:{
					title:"新闻资讯",
					contitle:"新闻资讯 Tue Nov 01 2022"
				}
			}
		},
		methods: {
			open() {
						this.$refs.popup.open('top')
					},
					close() {
						this.$refs.popup.close()
					},
					go() {
						uni.navigateTo({
							url:"/pages/index/go"
						})
					}
		}
	}
</script>

<style>
	*{margin: 0;padding: 0;}
	page{background-color: #fff;}
	.index-top{width: 100%;height: 1000rpx;background-size: 100% 100%;position: relative;}
	/* 新闻资讯 */
	.news{background-color: #D12A14;color: #fff;width: 180rpx;text-align: center;position: absolute;right: 0;top: 120rpx;line-height: 60rpx;border-top-left-radius: 30rpx;border-bottom-left-radius: 30rpx;font-size: 30rpx}
	.newscont{background-color: #fff;width: 90%;margin:240rpx auto;border-radius: 30rpx;border: #fff 2px solid;}
	.newscont .title{background-color: #D12A14;color: #fff;text-align: center;border-radius: 20rpx;padding: 20rpx 0;}
	.newscont .text{padding: 20rpx 40rpx;font-size: 28rpx}
	.newscont .close{background-color: #D12A14;color: #fff;text-align: center;border-radius: 30rpx;width: 180rpx;margin: 0 auto 20rpx;padding: 10rpx 0;}
	/* 今日步数 */
	.taday {
		position: absolute;bottom: 0;left: 30%;
		z-index: 10;
	}
	.red-circle {
		border: #D12A14 5px solid;
		width: 200rpx;
		margin: 0 auto;
		text-align: center;
		border-radius: 50%;
		height: 200rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
		line-height: 60rpx;
	}
	
	.red-circle span {
		color: #D12A14;
		display: block;
	}
	
	.taday .go {
		padding: 10rpx 0;
		text-align: center;
		background-color: #D12A14;
		color: #fff;
		border-radius: 30rpx;
		width: 280rpx;
		margin: 50rpx auto 0;
		font-size: 36rpx
		
	}
	.index-bottom{}
	
</style>
